<template>
  <div>
    <h1>修改页面</h1>
    <table>
      <tr>
        <td>借款款项名称</td>
        <td><input type="text" v-model="state.JName" /></td>
      </tr>
      <tr>
        <td>借款最高金额</td>
        <td><input type="text" v-model="state.JinE" /></td>
      </tr>
      <tr>
        <td>借款最高年限</td>
        <td><input type="text" v-model="state.NianXian" /></td>
      </tr>
      <tr>
        <td>利息</td>
        <td>
          <select v-model="state.Lid">
            <option value="0">请选择</option>
            <option :value="item.Lid" v-for="item in list">
              {{item.LName*100}}%
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>借款款项简介</td>
        <td><textarea v-model="state.JianJie"></textarea></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="添加" @click="add" /></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let data: any = reactive({
  state: {
    JName: '',
    JinE: '',
    NianXian: '',
    Lid: 0,
    JianJie: '',
  },
  list: [],
});

let { state, list } = toRefs(data);

onMounted(() => {
  getData();
  getDate()
});

const getDate=()=>{
  axios({
    url:'/api/JieKuans/FanTian',
    method:'get',
    params:{
      Jid:route.query.Jid
    }
  })
  .then(res=>{
    console.log(res);
    state.value=res.data.data
  })
  .catch(err=>{
    console.log(err);
    
  })
}

const getData = () => {
  axios({
    url: '/api/JieKuans/Xia',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const add = () => {
  if (state.value.JName == '') {
    alert('借款款项名称不能为空');
    return;
  }
  if (state.value.JinE == '') {
    alert('借款最高金额不能为空');
    return;
  }
  if (isNaN(Number(state.value.JinE))==true) {
    alert('借款最高金额必须是数字');
    return;
  }
  if (Number(state.value.JinE)<0) {
    alert('借款最高金额必须大于0');
    return;
  }
  if (state.value.NianXian == '') {
    alert('借款最高年限不能为空');
    return;
  }
  if (state.value.JianJie == '') {
    alert('借款款项简介不能为空');
    return;
  }
  axios({
    url:'/api/JieKuans/Update',
    method:'post',
    data:state.value
  })
  .then(res=>{
    if(res.data.data==-1){
      alert('该名称已存在');
      return;
    }
    else{
      alert('修改成功');
      router.push('/show');
    }
  })
};
</script>

<style scoped></style>
